{include file="public/head"}
<body>
<style>
    .portlet.light.bordered {
        border: 1px solid #e7ecf1 !important;
    }

    .portlet.light {
        padding: 12px 20px 15px;
        background-color: #fff;
    }

    .portlet {
        margin-top: 0;
        margin-bottom: 25px;
        padding: 0;
        border-radius: 4px;
    }

    .portlet.light.bordered > .portlet-title {
        border-bottom: 1px solid #eef1f5;
    }

    .portlet.light > .portlet-title {
        padding: 0;
        min-height: 48px;
    }

    .portlet.light > .portlet-title > .caption {
        color: #666;
        padding: 10px 0;
    }

    .portlet > .portlet-title > .caption {
        float: left;
        display: inline-block;
        font-size: 18px;
        line-height: 18px;
        padding: 10px 0;
    }

    .portlet.light > .portlet-title > .actions {
        padding: 6px 0 14px;
    }

    .portlet > .portlet-title > .actions {
        float: right;
        display: inline-block;
        padding: 6px 0;
    }

    .portlet .portlet-title .actions a.btn.btn-outline {
        padding: 5px 13px;
        font-size: 0.8em;
    }

    .portlet > .portlet-title > .caption > i {
        float: left;
        margin-top: 4px;
        display: inline-block;
        font-size: 13px;
        margin-right: 5px;
        color: #666;
    }

    .portlet.light > .portlet-title > .caption > i {
        color: #777;
        font-size: 15px;
        font-weight: 300;
        margin-top: 3px;
    }

    .portlet.light .portlet-body {
        padding-top: 8px;
    }

    .row {
        margin-left: -15px;
        margin-right: -15px;
    }

    .tb_row {
        margin-bottom: 40px;
    }

    .tb_title {
        margin-left: 4px;
        font-weight: 600;
        color: #666;
    }

    .tb_block {
        margin: 10px 0px;
        /* background-color: #FBFBFB; */
        text-align: center;
        font-size: 12px;
        color: #555;
        word-wrap: break-word;
    }

    .tb_line_1 {
        padding-left: 0px;
        padding-right: 0px;
        margin-top: 3px;
    }

    .tb_position {
        padding-left: 1.5px;
        padding-right: 1.5px;
    }

    .tb_bg {
        margin-top: 0px;
        position: absolute;
        bottom: 1px;
        right: 4px;
        font-size: 14px;
        font-weight: 600;
        color: #999;
    }

    .tb_item {
        position: relative;
    }

    .tb_position div[class^="tb_p"] {
        height: 60px;
        padding-top: 22px;
        border-radius: 5px !important;
        background-color: rgba(221, 221, 221, 0.5);
        transition: background-color 500ms;
    }

    .tb_position.active div[class^="tb_p"] {
        background-color: rgba(102, 204, 102, 0.5);
        transition: background-color 500ms;
    }

    .tb_position.here div[class^="tb_p"] {
        background-color: rgba(77, 148, 255, 0.5);
        transition: background-color 500ms;
    }

    .tb_line_2 {
        padding-left: 0px;
        padding-right: 0px;
        margin-top: 3px;
    }

    .tb_line_3 {
        padding-left: 0px;
        padding-right: 0px;
        margin-top: 3px;
    }

    .tb_line_3 .col-xs-1 {
        width: 11.11%;
    }
</style>
<div id="wrapper">
    {include file="public/menu"}

    <div id="page-wrapper" class="gray-bg dashbard-1">
        {include file="public/nav"}
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>家族</h2>
                <ol class="breadcrumb">
                    <li>
                        <a href="{:url('User/Panel')}">主页</a>
                    </li>
                    <li>
                        <a>动态家族</a>
                    </li>
                    <li>
                        <strong>动态家族</strong>
                    </li>
                </ol>
            </div>
            <div class="col-lg-2">

            </div>
        </div>
        <div class="row" style="margin-top: 2rem">
            <div class="col-md-12">
                <div class="portlet light bordered">
                    <div class="portlet-title tabbable-line">
                        <div class="caption hidden-xs">
                            <i class="icon-speech"></i>
                            <span class="caption-subject bold">
                        動態家族                    </span>
                            <span class="caption-helper hidden-xs">
                                            </span>
                        </div>
                        <div class="actions">
                            <a class="btn btn-outline fullscreen grey-cascade" href="javascript:"
                               data-original-title="" title="">
                                <i class="fa fa-expand"></i>
                            </a>
                        </div>
                    </div>
                    <div class="portlet-body" style="height: auto;">
                        <div class="row">
                            {volist name="map" id="v"}
                            <div class="col-md-4 col-sm-6 col-xs-12 tb_row">
                                <div class="tb_title"><span># ({$v.map_number})--{$v.type==1?'500配套':'1000配套'}</span></div>
                                <div class="tb_block">
                                    <div class="col-xs-12 tb_line_1">
                                        <div class="col-xs-12 tb_position tooltips {if condition='$v.detail[0]["user_id"] eq $user_id'}here{else/}active{/if}" data-html="true" data-original-title="<div class='text-left'>狀態: 活躍<br>店別: 本店<br>推薦數: 0</div>">
                                            <div class="tb_bg">總監 (P1)</div>
                                            <div class="tb_item">
                                                <div class="tb_p1"><span>{$v.detail[0]['recommend_num']}</span></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 tb_line_1">
                                        <div class="col-xs-12 tb_position tooltips {if condition='$v.detail[1]["user_id"] eq $user_id'}here{else/}active{/if}" data-html="true"
                                             data-original-title="<div class='text-left'>狀態: 活躍<br>店別: 本店<br>推薦數: 1</div>">
                                            <div class="tb_bg">處長 (P2)</div>
                                            <div class="tb_item">
                                                <div class="tb_p1"><span>{$v.detail[1]['recommend_num']}</span></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 tb_line_2">
                                        <div class="col-xs-4 tb_position tooltips {if condition='$v.detail[2]["user_id"] eq $user_id'}here{else/}active{/if}" data-html="true"
                                             data-original-title="<div class='text-left'>狀態: 活躍<br>店別: 本店<br>推薦數: 0</div>">
                                            <div class="tb_bg">經理1 (P3)</div>
                                            <div class="tb_item">
                                                <div class="tb_p1"><span>{$v.detail[2]['recommend_num']}</span></div>
                                            </div>
                                        </div>
                                        <div class="col-xs-4 tb_position tooltips {if condition='$v.detail[3]["user_id"] eq $user_id'}here{else/}active{/if}" data-html="true"
                                             data-original-title="<div class='text-left'>狀態: 活躍<br>店別: 本店<br>推薦數: 0</div>">
                                            <div class="tb_bg">經理2 (P4)</div>
                                            <div class="tb_item">
                                                <div class="tb_p1"><span>{$v.detail[3]['recommend_num']}</span></div>
                                            </div>
                                        </div>
                                        <div class="col-xs-4 tb_position tooltips {if condition='$v.detail[4]["user_id"] eq $user_id'}here{else/}active{/if}" data-html="true"
                                             data-original-title="<div class='text-left'>狀態: 活躍<br>店別: 本店<br>推薦數: 0</div>">
                                            <div class="tb_bg">經理3 (P5)</div>
                                            <div class="tb_item">
                                                <div class="tb_p1"><span>{$v.detail[4]['recommend_num']}</span></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 tb_line_2">
                                        <div class="col-xs-4 tb_position tooltips {if condition='$v.detail[5]["user_id"] eq $user_id'}here{else/}active{/if}" data-html="true"
                                             data-original-title="<div class='text-left'>狀態: 活躍<br>店別: 本店<br>推薦數: 0</div>">
                                            <div class="tb_bg">A級1 (P6)</div>
                                            <div class="tb_item">
                                                <div class="tb_p1"><span>{$v.detail[5]['recommend_num']}</span></div>
                                            </div>
                                        </div>
                                        <div class="col-xs-4 tb_position tooltips {if condition='$v.detail[6]["user_id"] eq $user_id'}here{else/}active{/if}" data-html="true"
                                             data-original-title="<div class='text-left'>狀態: 活躍<br>店別: 本店<br>推薦數: 0</div>">
                                            <div class="tb_bg">A級2 (P7)</div>
                                            <div class="tb_item">
                                                <div class="tb_p1"><span>{$v.detail[6]['recommend_num']}</span></div>
                                            </div>
                                        </div>
                                        <div class="col-xs-4 tb_position tooltips {if condition='$v.detail[7]["user_id"] eq $user_id'}here{else/}active{/if}" data-html="true"
                                             data-original-title="<div class='text-left'>狀態: 活躍<br>店別: 本店<br>推薦數: 0</div>">
                                            <div class="tb_bg">A級3 (P8)</div>
                                            <div class="tb_item">
                                                <div class="tb_p1"><span>{$v.detail[7]['recommend_num']}</span></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-12 tb_line_3">
                                        <div class="col-xs-1 tb_position tooltips {empty name='v.detail[8]'}empty{else/}{if condition='$v.detail[8]["user_id"] eq $user_id'}here{else/}active{/if}{/empty}" data-html="true">
                                            <div class="tb_item">
                                                <div class="tb_p1"><span>{$v.detail[8]['recommend_num']|default='空位'}</span></div>
                                            </div>
                                        </div>
                                        <div class="col-xs-1 tb_position tooltips {empty name='v.detail[11]'}empty{else/}{if condition='$v.detail[11]["user_id"] eq $user_id'}here{else/}active{/if}{/empty}" data-html="true">
                                            <div class="tb_item">
                                                <div class="tb_p1"><span>{$v.detail[11]['recommend_num']|default='空位'}</span></div>
                                            </div>
                                        </div>
                                        <div class="col-xs-1 tb_position tooltips {empty name='v.detail[14]'}empty{else/}{if condition='$v.detail[14]["user_id"] eq $user_id'}here{else/}active{/if}{/empty}" data-html="true">
                                            <div class="tb_item">
                                                <div class="tb_p1"><span>{$v.detail[14]['recommend_num']|default='空位'}</span></div>
                                            </div>
                                        </div>
                                        <div class="col-xs-1 tb_position tooltips {empty name='v.detail[9]'}empty{else/}{if condition='$v.detail[9]["user_id"] eq $user_id'}here{else/}active{/if}{/empty}" data-html="true">
                                            <div class="tb_item">
                                                <div class="tb_p1"><span>{$v.detail[9]['recommend_num']|default='空位'}</span></div>
                                            </div>
                                        </div>
                                        <div class="col-xs-1 tb_position tooltips {empty name='v.detail[12]'}empty{else/}{if condition='$v.detail[12]["user_id"] eq $user_id'}here{else/}active{/if}{/empty}" data-html="true">
                                            <div class="tb_item">
                                                <div class="tb_p1"><span>{$v.detail[12]['recommend_num']|default='空位'}</span></div>
                                            </div>
                                        </div>
                                        <div class="col-xs-1 tb_position tooltips {empty name='v.detail[15]'}empty{else/}{if condition='$v.detail[15]["user_id"] eq $user_id'}here{else/}active{/if}{/empty}" data-html="true">
                                            <div class="tb_item">
                                                <div class="tb_p1"><span>{$v.detail[15]['recommend_num']|default='空位'}</span></div>
                                            </div>
                                        </div>
                                        <div class="col-xs-1 tb_position tooltips {empty name='v.detail[10]'}empty{else/}{if condition='$v.detail[10]["user_id"] eq $user_id'}here{else/}active{/if}{/empty}" data-html="true">
                                            <div class="tb_item">
                                                <div class="tb_p1"><span>{$v.detail[10]['recommend_num']|default='空位'}</span></div>
                                            </div>
                                        </div>
                                        <div class="col-xs-1 tb_position tooltips {empty name='v.detail[13]'}empty{else/}{if condition='$v.detail[13]["user_id"] eq $user_id'}here{else/}active{/if}{/empty}" data-html="true">
                                            <div class="tb_item">
                                                <div class="tb_p1"><span>{$v.detail[13]['recommend_num']|default='空位'}</span></div>
                                            </div>
                                        </div>
                                        <div class="col-xs-1 tb_position tooltips {empty name='v.detail[16]'}empty{else/}{if condition='$v.detail[16]["user_id"] eq $user_id'}here{else/}active{/if}{/empty}" data-html="true">
                                            <div class="tb_item">
                                                <div class="tb_p1"><span>{$v.detail[16]['recommend_num']|default='空位'}</span></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {/volist}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {include file="public/foot"}

    </div>
</div>
</div>
{include file="public/footer"}

</body>
</html>
